
var bookAry = [
    {bookId:1,bookName:"斗罗大陆",auth:"唐家三少",type:"科幻小说",img:"img/1.jpg",price:25},
    {bookId:2,bookName:"斗破苍穹",auth:"天蚕土豆",type:"科幻小说",img:"img/2.jpg",price:27},
    {bookId:3,bookName:"三国演义",auth:"罗贯中",type:"文学著作",img:"img/3.gif",price:14},
    {bookId:4,bookName:"山海经",auth:"轶名",type:"文学著作",img:"img/2.jpg",price:25},
    {bookId:5,bookName:"最好的告别",auth:"阿图·葛文德",type:"文学著作",img:"img/3.gif",price:25},
    {bookId:6,bookName:"大主宰",auth:"天蚕土豆",type:"科幻小说",img:"img/2.jpg",price:25},
    {bookId:7,bookName:"java",auth:"老吴",type:"计算机网络",img:"img/3.gif",price:25},
    {bookId:8,bookName:"前端基础知识",auth:"老李",type:"计算机网络",img:"img/1.jpg",price:25},
    {bookId:9,bookName:"java进阶",auth:"老张",type:"计算机网络",img:"img/1.jpg",price:25},
]


let shopAry = [];

let showTr;
let showBook;

function $(elementId) {
    return document.getElementById(elementId);
}

window.onload = function () {
    fillTable(bookAry);
    changColor($("data").firstChild);
    $("buyBtn").onclick = function () {
        showShopDiv(showBook);
    }
}

/**
 * 填充表格
 * @param array 书籍数组
 */
function fillTable(array) {
    let str = "";
    array.forEach(obj => {
        str += `<tr onclick="changColor(this)" id="${obj.bookId}">
                    <td><img src="${obj.img}"></td>
                    <td>${obj.bookName}</td>
                    <td>${obj.auth}</td>
                    <td>${obj.price}</td></tr>`
    })
    $("data").innerHTML = str;
}

/**
 * 当前tr高亮显示以及书籍详情显示
 * @param trObj 选中的tr
 */
function changColor(trObj) {
    if (showTr != null) {
        showTr.style.backgroundColor = "white";
    }
    trObj.style.backgroundColor = "#e7e6e6";
    showTr = trObj;
    //显示书籍信息
    showBook = bookAry.find(obj => showTr.id == obj.bookId);
    let info = `<p>${showBook.bookName}</p><p>${showBook.auth}</p><p>${showBook.type}</p><p>${showBook.price}</p>`;
    $("leftDiv_center").innerHTML = info;
    $("bookImg").style.backgroundImage = `url('${showBook.img}')`
}

/**
 * 根据书名或类型模糊查询书籍
 */
function searchBook() {
    if ($("search_input").value == null || $("search_input").value.length == 0) {
        alert("请输入内容");
        return;
    }
    let arr = bookAry.filter(obj => {
        return obj.bookName.indexOf($("search_input").value) != -1 || obj.type.indexOf($("search_input").value) != -1
    })
    fillTable(arr);
}

/**
 * 显示购物车界面，显示购物车书本信息
 * @param book 当前所选书本
 */
function showShopDiv(book) {
    //得到屏幕的宽和高
    let width = window.screen.availWidth;
    let height = window.screen.availHeight;
    $("shopDiv").style.display = "block";
    $("shopDiv").style.width = width + "px";
    $("shopDiv").style.height = height + "px";

    let bookIndex = shopAry.findIndex(obj => obj.book.bookId == book.bookId);
    console.log(bookIndex)
    if (bookIndex != -1) {
        shopAry[bookIndex].num++;
    } else {
        shopAry.push({book, num: 1})
    }
    console.log(JSON.stringify(shopAry))
    fillShopTable(shopAry);
    totalPrice();
}

/**
 * 购物车书籍填充
 * @param array 购物车数组
 */
function fillShopTable(array) {
    let str = "";
    shopAry.forEach(obj => {
        str += `<tr id="${obj.book.bookId}"><td>${obj.book.bookName}</td><td>${obj.book.price}</td>
                <td><input type="text" style="width: 40px;height: 20px;" value="${obj.num}" onchange="changNum(${obj.book.bookId},this)"></td>
                <td>${obj.book.price * obj.num}</td>
                <td><input type="button" value="移除" style="width: 50px;" onclick="removeBook(${obj.book.bookId})"></td>  </tr>`
    })
    $("shopData").innerHTML = str;
}

/**
 * 书籍数量改变
 * @param bookId 书籍编号
 * @param inputObj 文本框对象
 */
function changNum(bookId, inputObj) {
    //将文本框内容转整型
    let num = parseInt(inputObj.value);
    let obj = shopAry.find(obj => bookId == obj.book.bookId)
    if (isNaN(num)) {//判断是否是NaN
        num = obj.num
    }
    //将文本框内容设置为num
    inputObj.value = num;
    obj.num = num;
    fillShopTable(shopAry);
    totalPrice();
}

/**
 * 移除书籍
 * @param bookId 书本id
 */
function removeBook(bookId) {
    let index = shopAry.findIndex(obj => obj.book.bookId == bookId);
    shopAry.splice(index, 1);
    fillShopTable(shopAry);
    totalPrice();
}

/**
 * 继续购物按钮
 */
function continueBuy() {
    $("shopDiv").style.display = "none";
}

/**
 * 总价计算
 */
function totalPrice() {
    let price = 0;
    shopAry.forEach(obj => {
        price += obj.book.price * obj.num
    })
    $("totalPriceSpan").innerHTML = price;

}